<template>
    <div class="income-container">
        <div class="chart" id="chart_left4"></div>
    </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import echarts from 'echarts'

    export default {
        name: 'income',
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                areaList:[],// 地区名称
                glassList:[],//玻璃输液瓶
                plassticList:[],//塑料输液瓶
                timer1:''
            }
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                clearInterval(this.timer1)
                this.getStatisticsData()
            },
        },
        mounted() {
            this.getStatisticsData()
        },

        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/InfusionBottleTopRight',params)
                if (res && res.success) {
                    let data = res.result || [];
                    // 获取到的区域名称
                    this.areaList = data.areas
                    // 获取到的玻璃输液瓶
                    this.glassList = data.glassbottles
                    // 获取到的塑料输液瓶
                    this.plassticList = data.plasticbottles
                }
                this.getEchartLeft4()
            },

            getEchartLeft4() {
                let myChart = this.$echarts.init(document.getElementById('chart_left4'))
                let option = {
                    title: {
                        textStyle: {
                            align: 'center',
                            color: '#fff',
                            fontSize: 20,
                        },
                        top: '5%',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '4%',
                        bottom: '14%',
                        top:'16%',
                        containLabel: true
                    },
                    legend: {
                        data: ['玻璃输液瓶', '塑料输液瓶'],
                        right: 10,
                        top:12,
                        textStyle: {
                            color: "#fff"
                        },
                        itemWidth: 12,
                        itemHeight: 10,
                        // itemGap: 35
                    },
                    xAxis: {
                        type: 'category',
                        // data: ['2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022'],
                        data: this.areaList,
                        axisLine: {
                            lineStyle: {
                                color: 'white'
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            // rotate: 40,
                            textStyle: {
                                fontFamily: 'Microsoft YaHei'
                            },
                            // 设置每行只显示3个数字
                            formatter: function (params) {
                                var newParamsName = ''
                                const paramsNameNumber = params.length
                                const provideNumber = 3 // 单行显示文字个数
                                const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                                if (paramsNameNumber > provideNumber) {
                                    for (let p = 0; p < rowNumber; p++) {
                                        var tempStr = ''
                                        var start = p * provideNumber
                                        var end = start + provideNumber
                                        if (p === rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber)
                                        } else {
                                            tempStr = params.substring(start, end) + '\n'
                                        }
                                        newParamsName += tempStr
                                    }
                                } else {
                                    newParamsName = params
                                }
                                return newParamsName

                            }
                        },
                    },

                    yAxis: {
                        type: 'value',
                        name: '单位：kg',
                        // max:'1200',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'white'
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.3)'
                            }
                        },
                        axisLabel: {}
                    },
                    dataZoom: [
                        //滑动条
                        {
                            xAxisIndex: 0, //这里是从X轴的0刻度开始
                            show: true, //是否显示滑动条，不影响使用
                            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                            startValue: 0, // 从头开始。
                            endValue: 6, // 一次性展示6个
                            height: 8, //组件高度
                            bottom: 18,
                            borderColor: "#90979c",
                            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                            handleStyle:{
                                color:"#d3dee5",
                            },
                            showDataShadow: false, //是否显示数据阴影 默认auto
                            // backgroundColor: "#f4f6f8",
                            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                            realtime: false, //是否实时更新
                            filterMode: "filter"
                        }
                    ],
                    series: [
                        {
                            name: '玻璃输液瓶',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#8bd46e'
                                    }, {
                                        offset: 1,
                                        color: '#09bcb7'
                                    }]),
                                    barBorderRadius: 11,
                                }

                            },
                            data: this.glassList
                        },
                        {
                            name: '塑料输液瓶',
                            type: 'bar',
                            barWidth: '15%',
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#248ff7'
                                    }, {
                                        offset: 1,
                                        color: '#6851f1'
                                    }]),
                                    barBorderRadius: 11,
                                }
                            },
                            data: this.plassticList
                        }]
                };
                let num = this.areaList.length
                this.timer1 = setInterval(function() {
                    // 每次向后滚动一个，最后一个从头开始。
                    if (option.dataZoom[0].endValue == num) {
                        option.dataZoom[0].endValue = 6;
                        option.dataZoom[0].startValue = 0;
                    } else {
                        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                    }
                    myChart.setOption(option, true)
                }, 2000);
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
        beforeDestroy() {
            clearInterval(this.timer1)
        }
    }
</script>

<style lang="less" scoped>
    .income-container {
        .chart {
            height: 3rem;
        }
    }
</style>
